<template>
  <div>
    <div class="wrapper">
      <router-view></router-view>
    </div>
    <van-tabbar
      v-model="active"
      active-color="#d41e32"
      inactive-color="#000"
    >
      <van-tabbar-item
        to="/home"
        icon="home-o"
      >主页</van-tabbar-item>
      <van-tabbar-item
        to="/categories"
        icon="apps-o"
      >分类</van-tabbar-item>
      <van-tabbar-item
        to="/cart"
        icon="shopping-cart-o"
      >购物车</van-tabbar-item>
      <van-tabbar-item
        to="/user"
        icon="contact"
      >我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "Main",
  data() {
    return {
      active: 0,
    };
  },
};
</script>
<style lang="less" scoped>
.wrapper {
  height: calc(100vh - 50px);
  overflow: scroll;
}
</style>